<template>
<view class="container">
    <view class="type-navbar">
        <view v-for="(item, index) in categories" :key="index" class="type-box">
            <view :id="item.id" :class="'type-navbar-item ' + (typeId == item.id ? 'type-item-on' : '')" @tap="changeTab">
                {{item.name}}
            </view>
        </view>
    </view>
    <view class="coupon-list">
        <view v-for="(item, index) in coupons" :key="index" class="coupon-box">
            <view :class="'coupon-head ' + (typeId!=0?'head-disable':'')" :style="'border-image-source:url(' + resourceUrl + '/static/images/coupon_a.png)'">
            <image :src="resourceUrl + '/static/images/cpn.png'" style="width:250rpx;height:174rpx;"></image>
            <view class="h-pak">
            <view :style="'background:' + (typeId==1?'#999':(typeId==2?'#999':''))" class="coupon-money">
              <view class="money">
                <text class="cm-sm">￥</text>
                <text class="cm-big">{{item.money}}</text>
              </view>
              <view class="line">{{item.use_scope}}</view>
            </view>
                
            </view>
            </view>
            <view class="coupon-body">
                <view class="line line-adt">{{item.name}}</view>
                <view class="line line-left">满 {{item.condition}} 元使用</view>
                <view class="use-end">{{item.startTimeFommat}} - {{item.deadTimeFommat}}</view>
                <view :class="'use-btn ' + (typeId!=0?'btn-disable':'')" :data-item="item" @tap="useCoupon">{{typeId==1?'已使用':(typeId==2?'已过期':'立即使用')}}</view>
            </view>
        </view>
    </view>
    <view class="cou_li_wrap">
        <navigator class="cou_li" url="/pages/activity/coupon_list/coupon_list">领券中心</navigator>
        <navigator class="cou_li" @tap="show">兑换优惠券</navigator>
    </view>
    <view class="modal-box" :hidden="flag">
        <view class="modal-body">
            <view class="modal-content">
                <view class="modal-content-name">兑换优惠券</view>
                <input type="text" class="modal-content-input" placeholder="请输入优惠券码" :value="couponCode" @input="inputCouponCode"></input>
                <view class="knowBtn redBtn" @tap="exchange">确定</view><view class="knowBtn" @tap="hide">取消</view>
            </view>
        </view>
    </view>
    <view class="no-data" v-if="!coupons || coupons.length == 0">
        <image src="/static/images/cart-null.png" class="cart-image"></image>
        <view class="no-data-title">没有找到相关的数据</view>
        <navigator url="/pages/index/index/index" class="lookat"> 去逛逛 </navigator>
    </view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      categories: [{
        name: "未使用",
        id: 0
      }, {
        name: "已使用",
        id: 1
      }, {
        name: "已过期",
        id: 2
      }],
      typeId: 0,
      coupons: null,
      currentPage: 1,
      couponCode: '',
      flag: true
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var typeId = typeof options.type == 'undefined' ? this.typeId : options.type;
    load.init(this, '', 'coupons');
    this.requestCoupons(typeId);
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestCoupons(this.typeId);
    }
  },
  onPullDownRefresh: function (e) {
    this.reloadCoupons(this.typeId);
  },
  methods: {
    //出现
    show: function () {
      this.setData({
        flag: false
      });
    },
    //消失
    hide: function () {
      this.setData({
        flag: true
      });
    },
    changeTab: function (e) {
      this.reloadCoupons(e.currentTarget.id);
    },
    requestCoupons: function (typeId) {
      var that = this;
      var requestUrl = '/api/user/getCouponList?type=' + typeId + '&p=' + that.currentPage;
      this.setData({
        typeId: typeId
      });
      load.request(requestUrl, function (res) {
        that.currentPage++;
        res.data.result.forEach(function (val, index, arr) {
          val.deadTimeFommat = util.format(val.use_end_time, 'yyyy-MM-dd');
          val.startTimeFommat = util.format(val.use_start_time, 'yyyy-MM-dd');
        });
        uni.stopPullDownRefresh();
      });
    },
    //重载数据
    reloadCoupons: function (typeId) {
      load.resetConfig();
      this.setData({
        coupons: null
      });
      this.currentPage = 1;
      this.requestCoupons(typeId);
    },
    inputCouponCode: function (e) {
      this.setData({
        couponCode: e.detail.value
      });
    },
    exchange: function () {
      var that = this;

      if (this.couponCode == '') {
        app.globalData.showTextWarining("请输入优惠劵码");
        return;
      }

      this.hide();
      request.post('/api/cart/cartCouponExchange', {
        data: {
          coupon_code: that.couponCode
        },
        success: function (res) {
          that.setData({
            typeId: 0
          });
          that.reloadCoupons(0);
          app.globalData.showSuccess('兑换成功');
        },
        complete: function () {
          that.setData({
            couponCode: ''
          });
        }
      });
    },
    useCoupon: function (e) {
      if (this.typeId > 0) {
        app.globalData.showTextWarining(this.typeId == 1 ? '卡券已被使用' : '卡券已过期');
        return;
      }

      var coupon = e.currentTarget.dataset.item;

      if (coupon.goods_id) {
        uni.navigateTo({
          url: '/pages/goods/goodsInfo/goodsInfo?goods_id=' + coupon.goods_id
        });
      } else if (coupon.category_id) {
        uni.navigateTo({
          url: '/pages/goods/goodsList/goodsList?cat_id=' + coupon.category_id
        });
      } else {
        uni.navigateTo({
          url: '/pages/goods/goodsList/goodsList'
        });
      }
    }
  }
};
</script>
<style>
/* coupon.wxss */
page{
  background-color: #f5f5f5;
}
.type-navbar{
    white-space: nowrap;
    display: flex;
    width: 100%;
    height:82rpx;
    background-color: #fff;
    margin-bottom:30rpx;
    border-top: 1rpx solid #f3f3f3;
    border-bottom: 1rpx solid #f3f3f3;
    position: fixed;
    top: 0;
    z-index: 999;
}
.ellipsis-2{
  text-align: center;
}
.type-box{
    width:33.3333333333%;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 76rpx;
    padding: 0 70rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.type-navbar-item{
    border-bottom: 4rpx solid #fff;
}
.type-item-on{
    border-bottom: 4rpx solid #ff6a00;
    font-weight: bold;
    color: #ff6a00;
}
.coupon-box{
    box-sizing: border-box;
    width: 710rpx;
    font-size: 25rpx;
    margin: 0 auto;
    margin-bottom:20rpx;
    border:1rpx solid #f3f3f3;
    overflow: hidden;
    height: 173rpx;
    padding-right: 1rpx;
    border-radius: 10rpx;
}
.coupon-head{
    color: white;
    border-image:none 100% 0 5 repeat;
    width: 250rpx;
    height: 174rpx;
    float: left;
    position: relative;
}
.h-pak{
  position: absolute;
  top: 0;
  width:100%;
}
.coupon-money{
    font-weight: bold;
    overflow:hidden;
    text-align:center;
    width: 250rpx;
    height: 174rpx;
    position: relative;
}
.money{
    font-size: 56rpx;
    padding-top: 42rpx;
    width: 250rpx;
    height: 80rpx;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-sm{
  font-size: 30rpx;
}

.coupon-body{
    background-color:white;
    padding:28rpx 0rpx 15rpx 25rpx;
    color:#999999;
    width:452rpx;
    float:right;
    box-sizing:border-box;
    border-left: none;
}
.use-btn{
    color: #ff6a00;
    border: 2rpx solid #ff6a00;
    padding: 6rpx 12rpx;
    border-radius: 35rpx;
    width: fit-content;
    float:right;
    margin-top:20rpx;
    margin-right: 15rpx;
}
.use-end{
    color:#333;
    background-color:#f8f8f8;
    font-size: 22rpx;
    display:inline-block;
    float:left;
    margin-top:30rpx;
}
.line{
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 32rpx;
    text-align: center;
    font-size:22rpx;
}
.line-adt{
  text-align: left;
  font-size: 26rpx;
  color: #333333;
}
.btn-disable{
    color: #999999;
    border-color: #999999;
}
.cou_li_wrap{
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 999
}
.cou_li{
    width: 374rpx;
    float: left;
    text-align: center;
    height: 98rpx;
    line-height: 98rpx;
    color: #ff6a00;
    font-size: 28rpx;
    border: 1rpx solid #f3f3f3;
    border-bottom: 0;
}
.cou_li:first-child{
    border-left: 0;
}
.cou_li:last-child{
    border-right: 0;
}
.cou_li:first-of-type{
    border-right: 0rpx;
}
.coupon-list{
    margin-bottom: 80rpx;
    padding-top: 100rpx;
}
.modal-box{
  position:fixed;
  width:100%;
  height:100%;
  z-index: 997;
  top:0;
  background:rgba(0,0,0,0.4);
  overflow: hidden;
  }

.modal-body{
  position:relative;
  }

.modal-content{
  /* width: 60%; */
  margin:400rpx auto;
  overflow: hidden;
  border-radius: 10rpx;
  }

.modal-content{
  width: 60%;
  height:250rpx; 
  background-color:#fff; 
}
.modal-content-name{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 26rpx;
    border-bottom: 1rpx solid #f3f3f3;
}
.modal-content-input{
    text-align: center;
   height:85rpx;
    line-height:85rpx;
    font-size:26rpx;
}
.modal-content .fenxiang{
  width: 100%;
  height: 40%;
}
.modal-content .knowBtn{
    width:224rpx;
    border:transparent;
    float:left;
    text-align: center;
    font-size: 30rpx;
    height: 85rpx;
    line-height: 85rpx;
    border-top: 1rpx solid #f3f3f3;
    border-right:1rpx solid #f3f3f3;
    cursor: pointer;  
}
.modal-content .redBtn{
    background-color: #ff6a00;
    color: #fff;
}
.modal-content .knowBtn:last-of-type{
    border-right: 0rpx;
}
.line-left{
  text-align: left;
  color: #333333;
  font-size: 22rpx;
}

/*以下是新增的样式*/
.coupon_list{
  margin: 0 auto;
  width: 724rpx;
  height: 254rpx;
  margin-top: 20rpx;
  position: relative;
}
.coupon_list:first-child{
  margin-top: 110rpx;
}

.coupon_list .coupon_bg{
  width: 724rpx;
  height: 254rpx;
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  z-index: 0;
}
.coupon_list .coupon_already{
  position: absolute;
  width: 185rpx;
  height: 163rpx;
  right: 7rpx;
  top: 3rpx;
  z-index: 1;
}
.coupon_list .coupon_mode{
  width: 160rpx;
  height: 160rpx;
  margin-top: 43rpx;
  margin-left: 47rpx;
  /* float: left; */
}
.main_box{
  width: 100%;
  height: 100%;
  z-index: 10;
  position: relative;
}
.coupon_list .right_main{
  width: 437rpx;
  height: 100%;
  float: right;
  padding-right: 45rpx;
  box-sizing: border-box;
}
.coupon_list .right_main .topbox{
  height: 110rpx;
  width: 100%;
  margin-top: 3rpx;
  box-sizing: border-box;
  padding-top: 3rpx;
  line-height: 110rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 24rpx;
  color: #333333;
  font-weight: 500;
}
.coupon_list .right_main .footbox{
  height: 130rpx;
  width: 100%;
}
.coupon_list .right_main .footbox .leftbox{
  width: 230rpx;
  height: 100%;
  float: left;
  color: #ff6a00;
}
.coupon_list .right_main .footbox .price{
  width: 100%;
  height: 60rpx;
  margin-top: 10rpx;
  font-size: 24rpx;
  line-height: 60rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}
.coupon_list .right_main .footbox .price .note{
  font-size: 36rpx;
}
.coupon_list .right_main .footbox .full{
  width: 100%;
  height: 45rpx;
  line-height: 45rpx;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coupon_list .right_main .footbox .btn_1{
  width:140rpx;
  height:48rpx;
  float: right;
  background:linear-gradient(90deg,rgba(255,59,59,1) 0%,rgba(255,115,61,1) 100%);
  box-shadow:0rpx 6rpx 10rpx 1rpx rgba(255,59,59,0.3);
  border-radius:24rpx;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
  line-height: 48rpx;
  margin-top: 40rpx; 
}
.coupon_list .right_main .footbox .btn_2{
  width:140rpx;
  height:48rpx;
  float: right;
  background:rgba(153,153,153,1);
  box-shadow:0rpx 6rpx 10rpx 1rpx rgba(102,102,102,0.3);
  border-radius:24rpx;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
  line-height: 48rpx;
  margin-top: 40rpx; 
}
</style>